<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { 
  faClock,
  faLocationDot,
  faMap,
  faPassport,
  faInfoCircle
} from '@fortawesome/free-solid-svg-icons'

library.add(faClock, faLocationDot, faMap, faPassport, faInfoCircle)
</script>

<template>
  <section class="visa-policy">
    <div class="container">
      <h2 class="section-title">最新过境免签政策</h2>
      <div class="policy-cards">
        <div class="policy-card">
          <div class="icon-container">
            <font-awesome-icon :icon="faClock" class="policy-icon" />
          </div>
          <h3>停留时间延长</h3>
          <p>过境免签停留时间由原72小时和144小时均延长至<strong>240小时（10天）</strong></p>
        </div>
        
        <div class="policy-card">
          <div class="icon-container">
            <font-awesome-icon :icon="faLocationDot" class="policy-icon" />
          </div>
          <h3>扩大入境口岸</h3>
          <p>新增21个过境免签入出境口岸，适用口岸从39个增加至<strong>60个</strong></p>
        </div>
        
        <div class="policy-card">
          <div class="icon-container">
            <font-awesome-icon :icon="faMap" class="policy-icon" />
          </div>
          <h3>扩大活动区域</h3>
          <p>活动区域扩大至<strong>24个省（区、市）</strong>，并允许在这些区域内跨省域旅行</p>
        </div>
        
        <div class="policy-card">
          <div class="icon-container">
            <font-awesome-icon :icon="faPassport" class="policy-icon" />
          </div>
          <h3>适用54国公民</h3>
          <p>符合条件的<strong>俄罗斯、巴西、英国、美国、加拿大</strong>等54国公民可享受此政策</p>
        </div>
      </div>
      
      <div class="policy-notice">
        <h4>
          <font-awesome-icon :icon="faInfoCircle" class="notice-icon" />
          政策说明
        </h4>
        <p>此次放宽优化过境免签政策是中国为促进高水平对外开放、便利中外人员往来的重要举措，有利于加快推动人员跨境流动，促进对外交流合作，为经济社会高质量发展注入新动能。</p>
        <p class="source">信息来源：<a href="https://www.gov.cn/lianbo/bumen/202412/content_6993129.htm" target="_blank">中国政府网</a></p>
      </div>
    </div>
  </section>
</template>

<style scoped>
.visa-policy {
  padding: 80px 0;
  background-color: white;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #1a3a5f;
  margin-bottom: 60px;
  position: relative;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #16a34a;
  border-radius: 2px;
}

.policy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.policy-card {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.policy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.icon-container {
  width: 70px;
  height: 70px;
  background-color: #e6f7ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.policy-card h3 {
  font-size: 20px;
  color: #2d3748;
  margin-bottom: 15px;
}

.policy-card p {
  color: #4a5568;
  line-height: 1.6;
}

.policy-notice {
  background-color: #f0fdf4;
  border-left: 4px solid #16a34a;
  padding: 30px;
  border-radius: 8px;
  margin-top: 40px;
}

.policy-notice h4 {
  font-size: 22px;
  color: #16a34a;
  margin-bottom: 15px;
}

.policy-notice p {
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 10px;
}

.source {
  font-size: 14px;
  color: #718096;
  margin-top: 20px;
}

.source a {
  color: #16a34a;
  text-decoration: none;
}

.source a:hover {
  text-decoration: underline;
}

.policy-icon {
  font-size: 32px;
  color: #16a34a;
}

.policy-notice h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-icon {
  font-size: 24px;
  color: #16a34a;
}
</style> 